<template>
  <!-- table - {{ route.params.name }} -->
  <div class="table">
    <div v-for="(item, k, idx) in data" :key="idx" style="display: flex; justify-content: center; width: 100%">
      <div class="sub-table" v-if="filterList.indexOf(k) >= 0">
        <div class="sub-table-head" @click="is_Show(idx)">
          <span>
            {{ item.name }}
          </span>
        </div>
        <div class="sub-table-main" v-show="isShow[idx]">
          <item v-for="(subItem, subKey, subIdx) in item.data" :key="subIdx" :data="subItem" :name="subKey" :raw="data">
          </item>
          <!-- <el-button @click="OK(item.data)">ok</el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import Item from "./Item.vue";
import { reactive, ref } from "@vue/reactivity";
import { useRoute, useRouter } from "vue-router";
import { raw_data } from "../tableData/data.js";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";

const route = useRoute();
const router = useRouter();

onMounted(() => {
  if (
    Cookies.get("userid") === "" ||
    Cookies.get("userid") === null ||
    Cookies.get("userid") === undefined
  ) {
    ElMessage({
      message: "未登录！",
      type: "warning",
      grouping: true,
    });
    router.push("/login");
  }
});

console.log(route.params.name);
const to_ = route.params.name.split("-");

const Map = {
  1: {
    1: ["info"],
    2: ["ldzjjdk"],
    3: ["gfjycb"],
    4: ["gfsr", "sl"],
  },
};
const data = reactive(raw_data);
const filterList = ref(Map[to_[0]][to_[1]]);
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  // console.log(to, from)
  if (to.params.hasOwnProperty("name")) {
    const to_ = to.params.name.split("-");
    const fL = Map[to_[0]][to_[1]];
    console.log(filterList);
    filterList.value = reactive(fL);
  }
});

const isShow = ref(Array(5));
for (let i = 0; i < 5; i++) isShow.value[i] = true;
const is_Show = (idx) => {
  console.log(idx);
  isShow.value[idx] = !isShow.value[idx];
};

const OK = (data) => {
  console.log(data);
};
</script>

<style>
.table {
  margin: 20px;
  padding-bottom: 5px;
  width: auto;
  /* height: calc(100vh - 110px); */

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* flex-direction: column; */

  /* overflow: scroll; */
}

.table .el-form-item__label {
  line-height: 16px;
  font-size: 12px;
}

.table .el-form-item {
  margin-bottom: 10px;
}

.sub-table {
  width: 100%;
  /* width: calc((100vw - 280px)/2); */
  /* max-width: 300px; */
  /* max-width: 45%; */
  min-width: 300px;
  /* height: 200px; */
  background-color: #eff6ff;
  border-style: dashed;
  border-width: 1px;
  border-color: lightgrey;

  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sub-table-head {
  width: 100%;
  height: 40px;
  background-color: #f9fafb;
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: lightgrey;
}

.sub-table-head:hover {
  cursor: pointer;
}

.sub-table-head span {
  line-height: 40px;
}

.sub-table-main {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;

  background: linear-gradient(rgba(236, 245, 255, 0.9), rgba(236, 245, 255, 0.95)), url("../assets/logo-big.png");
  background-repeat: repeat-y;
  background-size: 650px;
  background-position: 15%;
}
</style>